Introduction to CSS

🎯 `Objectives`

By the end of this tutorial, you will:

🎨 Understand the basics of CSS and its role in styling web pages.
🛠️ Apply CSS rules to create visually appealing and organized web content.

📚 Content Overview

1. CSS Basics: Selectors, Properties, and Values (1 Hour)

CSS (Cascading Style Sheets) controls how HTML elements appear on a webpage.

✨ Structure of a CSS Rule

A CSS rule consists of:

Selector: Targets an HTML element.
Property: Defines what to style.
Value: Specifies the styling applied.

selector {
    property: value;
}

🎯 Example

h1 {
    color: blue;
    text-align: center;
}

✨ Common Selectors

Element Selector: Targets all instances of an element.

p {
    font-size: 16px;
}

Class Selector: Targets elements with a specific class.

.highlight {
    background-color: yellow;
}

HTML Example:

<p class="highlight">This is highlighted!</p>

ID Selector: Targets a specific element with an ID.

#unique {
    border: 1px solid black;
}

HTML Example:

<div id="unique">Unique box</div>

🧩 Inline, Internal, and External CSS

✨ Inline CSS

Define styles directly in an element’s style attribute.

<p style="color: red;">This text is red.</p>

✨ Internal CSS

Use the <style> tag in the <head> section of your HTML document.

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>

✨ External CSS

Link an external CSS file using the <link> tag.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

🔑 Best Practice: Use external CSS for better organization and reusability.

🌀 Vibe Coding Session + AI Partner

"Let AI help you find your visual style as you explore your first styling rules."

🛠️ AI Tools + Prompts

Tool	Use Case	Sample Prompts
💬 ChatGPT	Syntax help, example code	- "Give me a basic CSS stylesheet for a dark theme." - "Explain the difference between class and ID selectors."
🤖 Claude	Explain selector logic, optimize code	- "Clean up and organize this CSS code." - "Explain how specificity works in CSS selectors."
🌈 Gemini	Creative layout ideas	- "Suggest a minimal layout for a personal landing page." - "How to make a sticky header using CSS?"
⚡ GitHub Copilot	Suggests complete style blocks	Try typing `body {` or `.container {` and Copilot will fill values.
📝 Notion AI	Writing style guides and naming conventions	"Write a color and font style guide for my project."
🎨 Figma AI	Design → Code handoff previews	"Design a two-column layout and convert it to CSS."

✅ Challenge

Goal: Create an HTML + CSS page using internal or external stylesheets.

🎯 Style headings, paragraphs, and links.
💡 Let AI assist with structure, naming, or layout inspiration.

🎯 CSS Styling Tutorial — Foundations & Basic Properties

🎓 Objectives

By the end of this tutorial, you will:

🎨 Understand the basics of CSS and its role in styling web pages.
🛠️ Apply CSS rules to create visually appealing and organized web content.

📚 Content Overview

1. CSS Basics: Selectors, Properties, and Values (1 Hour)

CSS (Cascading Style Sheets) controls how HTML elements appear on a webpage.

✨ Structure of a CSS Rule

selector {
    property: value;
}

🎯 Example:

h1 {
    color: blue;
    text-align: center;
}

✨ Common Selectors

Element Selector: Targets all instances of an element.

p { font-size: 16px; }

Class Selector: Targets elements with a specific class.

.highlight { background-color: yellow; }

HTML Example:

<p class="highlight">This is highlighted!</p>

ID Selector: Targets a specific element by ID.

#unique { border: 1px solid black; }

<div id="unique">Unique box</div>

✨ Inline, Internal, and External CSS

Inline CSS: Styles written directly in an element.

<p style="color:red;">This text is red.</p>

Internal CSS: Styles inside the <style> tag in the head.

<head>
  <style>
    body { font-family: Arial, sans-serif; }
  </style>
</head>

External CSS: Linked stylesheet for larger projects.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

🔑 Best Practice: Use external CSS for clean and reusable styles.

🎨 Basic Styling Properties

✨ Colors

h1 {
  color: #3498db;
  background-color: #f1c40f;
}

✨ Font Styles

p {
  font-family: 'Arial', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

✨ Text Alignment

h2 { text-align: center; }

✨ Spacing with Padding and Margin

div {
  padding: 20px;
  margin: 15px;
}

✨ Example of Styling a Button

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

🌀 Vibe Coding Session + AI Remix

"Add rhythm to your code with colors, spacing, and some AI spark."

🛠️ AI Tools + Prompts

Tool	Use Case	Sample Prompts
ChatGPT	Syntax help & style generation	"Style a card with a shadow."
Claude	Refactor styles	"Explain responsive padding."
Gemini	Modern CSS advice	"Flexible layouts with CSS."
Copilot	Predict class styling	Type `.card {` and continue.
Figma AI	Design → Code previews	"Design a two-column layout with CSS."

✅ Challenge

Create an HTML + CSS page using internal or external stylesheets.
Style headings, paragraphs, buttons, and links.
Use padding, margin, and color rules to improve layout.
Let AI tools suggest class names, themes, or spacing ideas.

🎨 Try It Yourself - CSS Basics

Edit the CSS code below and click Run to see the result live!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Basics Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #fff;
      color: #680202;
      text-align: center;
      padding: 20px;
    }

h1 {
      color: #fff;
      background-color: #680202;
      padding: 10px;
      border-radius: 8px;
    }

p {
      font-size: 18px;
      font-family: 'Arial', sans-serif;
      font-weight: bold;
    }

h2 {
      text-align: center;
      color: #b80b0b;
    }

div.box {
      padding: 20px;
      margin: 15px;
      background: #f8f8f8;
      border: 2px solid #680202;
      border-radius: 10px;
    }

button {
      background-color: #b80b0b;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

button:hover {
      background-color: #ce1717;
    }
  </style>
</head>
<body>
  <h1>CSS Basics Example</h1>
  <h2>Text Styling</h2>
  <p>This paragraph is styled using CSS properties for font, size, and weight.</p>

<div class="box">
    <p>Box with padding and margin</p>
    <button onclick="alert('You clicked the button!')">Click Me</button>
  </div>

<div class="ad-slot ad-center ad-between">
  </div>

📦 Try It Yourself - CSS Box Model

Introduction to the Box Model: The CSS Box Model describes how every element is structured on a page:

Content: The inner part containing text or other elements.
Padding: Space between the content and the border.
Border: Surrounds the padding.
Margin: Outer space between the element and others.

✨ Visual Example:

🌀 AI-Powered Vibe Coding: Box Mode Activated
"Let’s break the box and rebuild it—with AI as your layout lens."

✅ Challenge: Build a layout with clear margins, paddings, and borders. Use box-sizing intentionally and test layouts in dev tools.

Introduction to CSS

🎯 Objectives

📚 Content Overview

✨ Structure of a CSS Rule

🎯 Example

✨ Common Selectors

🧩 Inline, Internal, and External CSS

✨ Inline CSS

✨ Internal CSS

✨ External CSS

🌀 Vibe Coding Session + AI Partner

🛠️ AI Tools + Prompts

✅ Challenge

🎯 CSS Styling Tutorial — Foundations & Basic Properties

🎓 Objectives

📚 Content Overview

1. CSS Basics: Selectors, Properties, and Values (1 Hour)

✨ Structure of a CSS Rule

🎯 Example:

✨ Common Selectors

✨ Inline, Internal, and External CSS

🎨 Basic Styling Properties

✨ Colors

✨ Font Styles

✨ Text Alignment

✨ Spacing with Padding and Margin

✨ Example of Styling a Button

🌀 Vibe Coding Session + AI Remix

🛠️ AI Tools + Prompts

✅ Challenge

🎨 Try It Yourself - CSS Basics

📦 Try It Yourself - CSS Box Model

🎯 `Objectives`